<template>
  <div style="display: flex;flex-direction: column">
    <div class="hd">
      <span @click="$router.go(-1)"> 返回 </span>
      代理列表
    </div>
    <div class="alist">
        <div class="aitem" v-for="item in list" :key="item.uid">
            <div class="himg"><img :src="item.head_img" alt=""> </div>
            <div class="htxt">
              <div class="l1"> {{item.real_name}} ( {{item.phone}} ) </div>
              <div class="l2"> 微信昵称： {{item.nickname}} </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
const Mock = require('mockjs')
export default {
  name: 'list',
  data () {
    return {
      list: []
    }
  },
  created: async function () {
    this.getagentlist()
  },
  methods: {
    getagentlist: async function () {
      let _res = await this.$api.post('/fx/getagentlist', {
        rid: this.$store.state.agent.openid ? this.$store.state.agent.openid : 1
      })
      if (_res.data.state) {
        this.list = _res.data.data
      }
    }
  }

}
</script>

<style scoped>
.alist{
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
  background: #f4f4f4;
}
  .aitem{
    padding:10px;
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 10px 3px 15px rgba(0,0,0,.1);
    display: flex;
  }
  .himg{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
  }
  .himg > img {
    width:100%;
  }
  .htxt{
    padding-left: 20px;
  }
  .l1{
    font-size: 14px;
    color:#444;
    padding-top: 5px;
  }
  .l2{
    color:#898989;
    font-size: 12px;
  }
</style>
